import { Directive, DirectiveBinding } from 'vue';
import { useUserStoreWithOut } from "@/store/modules/user";

const hasPermission = (el: HTMLElement, binding: DirectiveBinding) => {
  const { value } = binding;

  const userStore = useUserStoreWithOut();

  const permissions: any = userStore.getPermissions

  // console.log(permissions);

  const hasFlag = permissions.some((permission: any) => {
    return permission.value === value;
  });

  if (!hasFlag) {
    el.parentNode && el.parentNode.removeChild(el);
  }

};

export const permissionDirective: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    hasPermission(el, binding);
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    hasPermission(el, binding);
  },
};